<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no,
		 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="./css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/lunbo.css" />
		<script src="./swiper/swiper-bundle.min.js"></script>
		<link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>

		<title></title>
	</head>
	<body>
		<div class="top">
			
		</div>
		<header>
			<div style="height: auto;" class="swiper-container">
				<div class="swiper-wrapper">

					<!-- 下面是4个不同颜色的轮播滑块 -->
					<div style="background-color: red;" class="swiper-slide sw-slide secope"><img src="./img/kc02.png" /></div>
					<div style="background-color: green;" class="swiper-slide secope "><img src="./img/kc02.png" />
					</div>
					<div style="background-color: yellow;" class="swiper-slide secope"><img src="./img/kc02.png" />
					</div>
					<div style="background-color: blue;" class="swiper-slide secope"><img src="./img/kc02.png" /></div>
				</div>
				<!-- <div class="swiper-button-prev" ></div> -->
				<!--左箭头-->
				<!-- <div class="swiper-button-next"></div> -->
				<!--右箭头-->
				<div class="swiper-pagination"></div>
				<!--分页器（就是4个点点）-->
			</div>
		</header>
		<nav class="container">
			<section>
				<h4>
					公开课
				</h4>
				<i>查看全部></i><strong></strong>
			</section>
			<div class="lunbo">
				<div class="swiper mySwiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放.
										</div>
									</div>
								</div>
								<!-- <div class="swiper-pagination"></div> -->
							</div>


						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放.
										</div>
									</div>
								</div>
								<!-- <div class="swiper-pagination"></div> -->
							</div>


						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放.
										</div>
									</div>
								</div>
								<!-- <div class="swiper-pagination"></div> -->
							</div>


						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放.
										</div>
									</div>
								</div>
								<!-- <div class="swiper-pagination"></div> -->
							</div>


						</div>

					</div>
					<!-- 四个小点 -->
					<!-- <div class="swiper-pagination"></div> -->
				</div>
			</div>
		</nav>
		<section class="container">
			<h4>
				热门推荐
			</h4>
			<i>查看全部></i><strong></strong>
		</section>
		<div class="menu">
			<a href="../课程详情和课程参数/index.html">
				<figure>
					<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
					<div class="wenzi2">
						<p>生活实用心理学课程，教你轻松应对生活难题</p>
						<p>生活中的实用宝典</p>
						<p>共30讲</p>
						<div class="wenzi2_bottom">
							<p>￥198</p>
							<p>120人已订阅</p>
						</div>
					</div>
				</figure>
			</a>
			<a href="../课程详情和课程参数/index.html">
				<figure>
					<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
					<div class="wenzi2">
						<p>生活实用心理学课程，教你轻松应对生活难题</p>
						<p>生活中的实用宝典</p>
						<p>共30讲</p>
						<div class="wenzi2_bottom">
							<p>￥198</p>
							<p>120人已订阅</p>
						</div>
					</div>
				</figure>
			</a>
			<a href="../课程详情和课程参数/index.html">
				<figure>
					<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
					<div class="wenzi2">
						<p>生活实用心理学课程，教你轻松应对生活难题</p>
						<p>生活中的实用宝典</p>
						<p>共30讲</p>
						<div class="wenzi2_bottom">
							<p>￥198</p>
							<p>120人已订阅</p>
						</div>
					</div>
				</figure>
			</a>
			<a href="../课程详情和课程参数/index.html">
				<figure>
					<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
					<div class="wenzi2">
						<p>生活实用心理学课程，教你轻松应对生活难题</p>
						<p>生活中的实用宝典</p>
						<p>共30讲</p>
						<div class="wenzi2_bottom">
							<p>￥198</p>
							<p>120人已订阅</p>
						</div>
					</div>
				</figure>
			</a>
			<a href="../课程详情和课程参数/index.html">
				<figure>
					<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
					<div class="wenzi2">
						<p>生活实用心理学课程，教你轻松应对生活难题</p>
						<p>生活中的实用宝典</p>
						<p>共30讲</p>
						<div class="wenzi2_bottom">
							<p>￥198</p>
							<p>120人已订阅</p>
						</div>
					</div>
				</figure>
			</a>
			
			
			
		</div>
		<div class="footer container">
			<ul>
				<li>
					<a href="../首页/index.html">
						<span>&#xe751;</span>
						<span>首页</span>
					</a>
				</li>
				<li>
					<a href="../课程/index.html">
						<span>&#xe614;</span>
						<span>课程</span>
					</a>
				</li>
				<li>
					<a href="../话题和关注/index.html">
						<span>
							&#xe630;
							</svg>
						</span>
						<span>话题</span>
					</a>
				</li>
				<li>
					<a href="../我的/index.html">
						<span>&#xe600;</span>
						<span>我的</span>
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>

<script>
	var swiper = new Swiper(".mySwiper", {
		slidesPerView: "auto",
		spaceBetween: 30,
		// pagination: {
		// 	el: ".swiper-pagination",
		// 	clickable: true,
		// },
	});
</script>
<script>
	var mySwiper = new Swiper('.swiper-container', { //初始化Swiper
		autoplay: { //自动切换
			delay: 3000,
			stopOnLastSlide: false,
			disableOnInteraction: false,

		},
		navigation: { //前进后退
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',

		},
		pagination: { //分页器
			el: '.swiper-pagination',
			clickable: true,

		},
		loop: true, //循环
	})
</script>
